<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1" />
<link rel="stylesheet" href="resources/simple-snap.css">
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../../resources/gesture-util.js"></script>
<script src="../../resources/scrollbar-util.js"></script>
<script src="../../resources/blink-coordinates-util.js"></script>

<div id='scroller'>
  <div id="space"></div>
  <div class="snap left top"></div>
  <div class="snap right top"></div>
  <div class="snap left bottom"></div>
</div>

<script>
  if (window.internals)
    internals.settings.setScrollAnimatorEnabled(false);

  window.onload = () => {
    const scroller = document.getElementById("scroller");
    const snapPoint = 400;
    const trackPos = 350;
    const clickDuration = 100;

    function scrollTop() {
      return scroller.scrollTop;
    }

    function scrollLeft() {
      return scroller.scrollLeft;
    }

    promise_test (async () => {
      scroller.scrollTo(0, 0);
      const thumb = horizontalThumb(scroller);
      await mousePressOn(trackPos, thumb.y, clickDuration);
      await waitForScrollEnd(scroller, scrollLeft, snapPoint);
    }, "Snaps after clicking the forward track on the horizontal scrollbar.");

    promise_test (async () => {
      scroller.scrollTo(0, 0);
      const thumb = verticalThumb(scroller);
      await mousePressOn(thumb.x, trackPos, clickDuration);
      await waitForScrollEnd(scroller, scrollTop, snapPoint);
    }, "Snaps after clicking on the forward track on the vertical scrollbar.");
  };
</script>

